<template>
  <div style="display: flex;">
    <slot name='otherTips'></slot>

    <div :class="{iconDiv: true, isDisabled: searchDisabled}" @click="changeSearchShow">
      <i class="el-icon-query"></i>
    </div>
    <div class="iconDiv"  @click="sendScreen">
      <i :class="isFullscreen?'el-icon-crop':'el-icon-full-screen'" style="font-size:20px;"></i>
      <span style="font-size: 12px;color:#1e1e1e;">&nbsp;全屏</span>
    </div>
    <el-dropdown placement="bottom" v-if='lineHeightBtn' :hide-on-click="false" trigger="click">
      <div class="iconDiv">
        <i class="iconfont icon--zitihanggao" style="font-size:20px;"></i>
        <span style="font-size: 12px;color:#1e1e1e;">&nbsp;行高</span>
      </div>
      <el-dropdown-menu slot="dropdown" style="width: 200px;">
        <el-dropdown-item>
          <el-slider v-model="value2" :max="500" :format-tooltip="formatFontTool"></el-slider>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <el-dropdown placement="bottom" v-if='fontSizeBtn' :hide-on-click="false" trigger="click">
      <div class="iconDiv">
        <i class="iconfont icon-zitidaxiao" style="font-size:20px;"></i>
        <span style="font-size: 12px;color:#1e1e1e;">&nbsp;字号</span>
      </div>
      <el-dropdown-menu slot="dropdown" style="width: 200px;">
        <el-dropdown-item>
          <el-slider :min='12' v-model="value1" :format-tooltip="formatFontTool"></el-slider>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <div class="iconDiv" @click="refresh">
      <i class="el-icon-refresh" style="font-size:20px;"></i>
      <span style="font-size: 12px;color:#1e1e1e;">&nbsp;刷新</span>
    </div>
    <div class="iconDiv" @click="showColumnChange">
      <i class="el-icon-s-operation" style="font-size:20px;"></i>
      <span style="font-size: 12px;color:#1e1e1e;">&nbsp;列显隐</span>
    </div>
      <div class="iconDiv" v-if="exportPermission" @click="handleExport">
      <i class="el-icon-download"  style="font-size:20px;"></i>
      <span style="font-size: 12px;color:#1e1e1e;">&nbsp;导出</span>
    </div>
    <el-button type="text" :disabled="addDisabledPermission" icon="el-icon-plus" class="rightbtn" v-if="addPermission && addBtn" @click="add">{{ this.addTitle }}</el-button>
    <el-button type="text" :disabled="delDisabledPermission" icon="el-icon-delete" class="rightbtn" v-if="delPermission && delBtn" @click="handleDelete">删 除</el-button>
    <div class="table_right_self_btn">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import { getByClass } from '@/util/func';
import { mapState } from 'vuex';
import { EventBus } from '@/event/event-bus';
import '@/styles/iconfont/iconfont.css';
export default {
  props: {
    searchDisabled: {
      required: false,
      default: false,
    },
    refreshChange: {
      required: false,
      default: false,
    },
    delPermission: {
      required: false,
      default: false,
    },
    addPermission: {
      required: false,
      default: false,
    },
    addDisabledPermission: {
      required: false,
      default: false,
    },
    exportPermission: {
      required: false,
      default: false,
    },
    handleDelete: {
      required: false,
      default: false,
    },
    handleExport: {
      required: false,
      default: false,
    },
    crud: {
      required: false,
      default: '',
    },
    addBtn: {
      required: false,
      default: true,
    },
    delBtn: {
      required: false,
      default: true,
    },
    delDisabledPermission: {
      required: false,
      default: false,
    },
    lineHeightBtn: {
      required: false,
      default: true,
    },
    fontSizeBtn: {
      required: false,
      default: true,
    },
    refreshBtn: {
      required: false,
      default: true,
    },
    columnBtn: {
      required: false,
      default: true,
    },
    searchBtn: {
      required: false,
      default: true,
    },
    rightbtn: {
      required: false,
      default: true,
    },
    fullBtn: {
      required: false,
      default: true,
    },
    handleAdd: {
      required: false,
    },
    addTitle: {
      required: false,
      default: '新 增',
    },
    id: {
      required: false,
      default: '',
    },
    data: {
      required: true,
      default: '',
    },
  },
  data() {
    return {
      value1: 12,
      value2: 22,
      isFullscreen: false,
    };
  },
  computed: {
    ...mapState({
      showFullScren: (state) => state.common.showFullScren,
    }),
  },
  methods: {
    changeSearchShow() {
      if (this.searchDisabled) {
        return
      }
      this.crud.$refs.headerSearch.handleSearchShow();
    },
    showColumnChange() {
      this.crud.$refs.dialogColumn.columnBox = true;
    },
    refresh() {
      this.refreshChange();
    },
    add() {
      if (this.handleAdd) {
        this.handleAdd();
      } else {
        this.crud.rowAdd();
      }
    },
    formatFontTool(val) {
      return val + 'px';
    },
    sendScreen() {
      this.isFullscreen = !this.isFullscreen;
      EventBus.$emit('fullscreen', this.isFullscreen);
    },
    fontFn(val) {
      const table = getByClass(document.getElementById(this.id) || document, 'el-table')[0];
      const tableChildren = table.getElementsByTagName('*');
      for (var j = 0; j < tableChildren.length; j++) {
        tableChildren[j].style.fontSize = val + 'px';
        tableChildren[j].style.lineHeight = val + 9.5 + 'px';
      }
    },
    lineHeightFn(val) {
      const table = getByClass(document.getElementById(this.id) || document, 'el-table')[0];
      const tableChildren = table.getElementsByTagName('td');
      for (var i = 0; i < tableChildren.length; i++) {
        if (tableChildren[i].tagName == 'TD') {
          tableChildren[i].style.height = val + 'px';
        }
      }
    },
  },
  watch: {
    value1(newValue, oldValue) {
      this.fontFn(newValue);
    },
    value2(newValue, oldValue) {
      this.lineHeightFn(newValue);
    },
    'crud.$refs.dialogColumn.columnBox'(newValue) {
      if (!newValue) {
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$nextTick(() => {
              this.fontFn(this.value1);
              this.lineHeightFn(this.value2);
            });
          });
        });
      }
    },
    data: {
      deep: true,
      handler() {
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$nextTick(() => {
              this.fontFn(this.value1);
              this.lineHeightFn(this.value2);
            });
          });
        });
      },
      immediate: false,
    },
  },
  created() {
    // this.changeSearchShow();
  },
  mounted() {
    //
    // 	  setTimeout(()=>{
    // 		  this.fontFn(this.value1);
    // 		  this.lineHeightFn(this.value2);
    // 	  },2000)
  },
};
</script>
<style lang="scss" scoped>

</style>
